<template>
  <div>
    <el-card>
      <el-row>
        <el-col :span="7" class="top_input">
          <label>订单号：</label>
          <el-input
            v-model="searchModel.orderNumber"
            clearable
            placeholder="请输入订单号"
          >
          </el-input>
        </el-col>
        <el-col :span="7" class="top_input">
          <label>申请单号：</label>
          <el-input
            v-model="searchModel.applicationId"
            clearable
            placeholder="请输入申请单号"
          >
          </el-input>
        </el-col>
      </el-row>

      <div style="margin-left: 5px">
        <el-button type="primary" plain size="small" @click="getOrderList()"
          >搜索</el-button
        >
      </div>
    </el-card>

    <el-card>
      <el-table :data="orderList" style="width: 100%">
        <el-table-column prop="driverId" label="订单号" width="220">
        </el-table-column>
        <el-table-column prop="applicationId" label="申请单号" width="200">
        </el-table-column>
        <el-table-column prop="dispatcherId" label="派单员ID" width="200">
        </el-table-column>
        <el-table-column prop="dispatchTime" label="派单时间" width="200">
        </el-table-column>
        <el-table-column prop="rating" label="用户评分" width="200">
        </el-table-column>

        <el-table-column prop="fuelCost" label="燃油费用" width="200">
        </el-table-column>

        <el-table-column prop="otherCost" label="其他费用" width="200">
        </el-table-column>

        <el-table-column
          prop="actualStartTime"
          label="实际开始时间"
          width="200"
        >
        </el-table-column>
        <el-table-column prop="actualEndTime" label="实际结束时间" width="200">
        </el-table-column>

        <el-table-column prop="status" label="状态" width="200">
          <template slot-scope="scope">
            <!-- ，in_progress-进行中，completed-已完成，cancelled-已取消 -->
            <el-tag v-if="scope.row.status == 'dispatched'" effect="dark"
              >已派车</el-tag
            >
            <el-tag
              v-if="scope.row.status == 'in_progress'"
              effect="dark"
              type="success"
              >进行中</el-tag
            >
            <el-tag
              v-if="scope.row.status == 'completed'"
              effect="dark"
              type="success"
              >已完成</el-tag
            >
            <el-tag
              v-if="scope.row.status == 'cancelled'"
              effect="dark"
              type="warning"
              >已取消</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleInfo(scope.row)"
              >查看详情</el-button
            >
            <el-button type="text" size="small" @click="handleUpdate(scope.row)"
              >修改</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-pagination
      @current-change="handleCurrentChange"
      :current-page="searchModel.pageNo"
      :page-size="searchModel.pageSize"
      layout="total,  prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>

    <el-dialog
      title="修改订单"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-form
        ref="orderForm"
        :model="orderForm"
        :rules="rules"
        label-width="80px"
      >
        <el-form-item label="燃油费用" prop="fuelCost">
          <el-input
            v-model.number="orderForm.fuelCost"
            placeholder="请输入燃油费用"
          ></el-input>
        </el-form-item>
        <el-form-item label="其他费用" prop="otherCost">
          <el-input
            v-model.number="orderForm.otherCost"
            placeholder="请输入其他费用"
          ></el-input>
        </el-form-item>

        <el-form-item label="状态" prop="status">
          <el-select v-model="orderForm.status" placeholder="请选择状态">
            <el-option
              v-for="item in statusOption"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="updateOrder()">确定</el-button>
          <el-button @click="close()">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<style>
.top_input {
  margin: 4px;
}

.row {
  margin: 10px;
}
</style>

<script>
import ordersApi from "@/api/orders";
export default {
  data() {
    return {
      searchModel: {
        pageNo: 1,
        pageSize: 10,
      },
      orderList: [],
      total: 0,

      dialogVisible: false,

      orderForm: {},

      statusOption: [
        { value: "dispatched", label: "已派车" },
        { value: "in_progress", label: "进行中" },
        { value: "completed", label: "已完成" },
        { value: "cancelled", label: "取消" },
      ],

      rules: {
        status: [{ required: true, message: "请选择状态", trigger: "change" }],

        fuelCost: [{ type: "number", message: "必须为数字值" }],
        otherCost: [{ type: "number", message: "必须为数字值" }],
      },

      drawer: false,
    };
  },

  methods: {
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
          this.close();
        })
        .catch((_) => {});
    },

    handleCloseDrawer(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
          this.Draweclose();
        })
        .catch((_) => {});
    },

    Draweclose() {
      this.orderForm = {};
      this.drawer = false;
    },

    close() {
      this.orderForm = {};
      this.$refs.orderForm.resetFields();
      this.dialogVisible = false;
    },

    handleCurrentChange(pageNo) {
      this.searchModel.pageNo = pageNo;
      this.getOrderList();
    },

    getOrderList() {
      ordersApi.getOrderList(this.searchModel).then((res) => {
        this.orderList = res.data.rows;
        this.total = res.data.total;
      });
    },

    handleUpdate(row) {
      // 回显数据
      ordersApi.getOrderById(row.id).then((res) => {
        this.orderForm = res.data.data.order;
        this.dialogVisible = true;
      });
    },

    updateOrder() {
      // 表单验证
      this.$refs.orderForm.validate((valid) => {
        if (valid) {
          ordersApi.updateById(this.orderForm).then((res) => {
            this.getOrderList();
            this.close();
          });
        } else {
          return false;
        }
      });
    },
  },

  created() {
    this.getOrderList();
  },
};
</script>
